<template>
	<view class="custom_vertical_list_image_group" :class="type">
		<view :style="imgStyle" class="custom_vertical_list_image_group_item">
			<!-- #ifdef MP-WEIXIN -->
			<navigator :url="imgItem.url" wx:for="(imgItem, index) in item" wx:key="'imgitem_'+index" v-if="index < 4">
				<image :src="imgItem.img" style="width:100%;height:100%;"></image>
			</navigator>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<navigator :url="imgItem.url" v-for="(imgItem, index) in item" :key="'imgitem_' + index" v-if="index < 4">
				<image :src="imgItem.img" style="width:100%;height:100%;"></image>
			</navigator>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	name: 'custom-vertical-list-image-group',
	props: {
		item: {
			type: Array,
			default() {
				return [];
			}
		},
		type: {
			type: String,
			default() {
				return 'two';
			}
		},
		imgStyle: {
			type: String,
			default() {
				return '';
			}
		}
	},
	data() {
		return {
			style: {
				width: '100%',
				height: '100%',
				borderRadius: '0rpx'
			}
		};
	}
};
</script>

<style lang="less">
.custom_vertical_list_image_group {
	.custom_vertical_list_image_group_item {
	}
	&.two {
		.custom_vertical_list_image_group_item {
			uni-navigator,
			navigator {
				width: 50%;
				height: 100%;
				float: left;
				overflow: hidden;
				margin: 0;
			}
		}
	}
	&.line {
		.custom_vertical_list_image_group_item {
			display: flex;
			uni-navigator,
			navigator {
				width: 25%;
				height: 100%;
			}
		}
	}
}
</style>
